<template>
	<view>
		<view class="top-header">
			<view class="tab-box">
				<view class="item-tab" v-for="(item,index) in tabArr" :key="index" @click="selectTabindex(index)">
					<view>{{ item.name }}</view>
					<view v-if="tabIndex == index" class="border-btm"></view>
				</view>
			</view>
			
			<!-- <view class="sai-search-box">
				<view class="left-sai-box">
					<view class="sai-name">订单号</view>
				</view>
				<view class="search-box">
					<input type="text" value="" placeholder="请输入关键词" />
				</view>
			</view> -->
		</view>
		
		<view class="content-box">
			<view class="item-order" v-for="(item,index) in list" :key="item.id">
				<view class="top-head">
					<view class="left-top-time">订单日期：{{ item.createtime_text }}</view>
					<view class="order-status">{{ item.state | stateText }}</view>
				</view>
				<view class="btm-order" v-for="order in item.goods" :key="order.id">
					<view class="top-btm-box">
						<view class="left-shop-img"><image :src="$wanlshop.oss(order.image)" mode=""></image></view>
						<view class="right-shop-detail">
							<view class="shop-name">{{ order.title }}</view>
							<view class="label-box mb-2">
								<view class="item-label">
									<view class="label-left-name mr-1">商品数量：</view>
									<view class="label-data">{{ order.number }}</view>
								</view>
								<view class="item-label">
									<view class="label-left-name mr-1">规格：</view>
									<view class="label-data">{{ order.difference }}</view>
								</view>
							</view>
							
							<view class="label-box mb-2">
								<view class="item-label">
									<view class="label-left-name mr-1">商品金额：</view>
									<view class="label-data">{{ order.price }}</view>
								</view>
								<!-- <view class="item-label">
									<view class="label-left-name mr-1">商品好人值：</view>
									<view class="label-data">{{ order.haoren_number }}</view>
								</view> -->
							</view>
							
							<view class="label-box mb-2">
								<view class="item-label">
									<view class="label-left-name mr-1">有效金额：</view>
									<view class="label-data font-color-red">{{ order.price }}</view>
								</view>
								<!-- <view class="item-label">
									<view class="label-left-name mr-1">佣金比例：</view>
									<view class="label-data font-color-red">10%</view>
								</view> -->
							</view>
							<!-- <view class="label-box">
								<view class="item-label">
									<view class="label-left-name mr-1">佣金比例：</view>
									<view class="label-data font-color-red">10%</view>
								</view>
								<view class="item-label">
									<view class="label-left-name mr-1">实际佣金：</view>
									<view class="label-data font-color-red">{{}}</view>
									<image class="icon-box-m6" src="../../../static/images/shop/m6.png" mode=""></image>
								</view>
							</view> -->
						</view>
					</view>
				</view>
				<view class="footer-box">
					<view class=""></view>
					<!-- <view class="left-footer label-item-footer" @click="getPhone(item.pick_mobile)">
						<view class="icon-m7-image"><image src="../../../static/images/shop/m7.png" mode=""></image></view>
						<view class="left-footer-name">{{ item.pick_name }}</view>
					</view> -->
					<view class="right-footer-box">
						<view class="label-item-footer" style="margin-right: 15rpx;" v-if="item.state == 3" @click="confirmOrder(item.id, index)">确认签收</view>
						<view class="label-item-footer label-item-footer-static" @click="goToOrderDetail(item.id)">查看详情</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabArr: [
					{
						name: '全部',
						status: 'all',
					},
					{
						name: '待核销',
						status: 2,
					},
					{
						name: '已核销',
						status: 6,
					},
					// {
					// 	name: '待签收',
					// 	status: 3,
					// },
					// {
					// 	name: '待提货',
					// 	status: 9,
					// },
					// {
					// 	name: '已完成',
					// 	status: 6,
					// }
				],
				tabIndex: 0,
				page: 1,
				total: 0,
				list: []
			}
		},
		onLoad(option) {
			if(option.tab != '') this.tabIndex = option.tab
			this.initOrder()
		},
		filters:{
			stateText(state) {
				let text
				if(state == 1) text = "未核销";
				if(state == 2) text = "待核销";
				if(state == 3) text = '配送中';
				if(state == 9) text = '待自提';
				if(state == 6) text = '已核销';
				if(state == 4) text = '已自提';
				return text
			}
		},
		methods: {
			//初始化订单列表
			initOrder() {
				let data = new Object();
				data.state = this.tabArr[this.tabIndex].status;
				data.page = this.page
				data.shop_id = uni.getStorageSync('userShopId')
				this.$api.post({
					url: '/wanlshop.shop/getOrderList',
					data,
					success: res => {
						uni.hideLoading()
						this.total = res.total;
						this.list.push(...res.data);
					}
				})
			},
			
			//拨打电话
			getPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			
			//确认收货
			confirmOrder(orderid, index) {
				let to_shop_id = uni.getStorageSync('userShopId');
				this.$api.post({
					url: '/wanlshop.shop/shopReceive',
					data: {orderid, to_shop_id},
					success: res => {
						uni.showToast({title: '签收成功', icon: 'success'});
					
						if(this.tabIndex = 0) this.list[index].state = 9
						else this.list.splice(index, 1)
					}
				})
			},
			
			//订单详情
			goToOrderDetail(id) {
				uni.navigateTo({
					url: '/pages/page/shopadmin/orderDetail?id='+id
				})
			},
			
			//tab切换
			selectTabindex(index) {
				if(index == this.tabIndex) return;
				this.list = [];
				this.page = 1;
				this.total = 0;
				this.tabIndex = index;
				this.initOrder();
			}
		},
		//上拉触低
		onReachBottom() {
			let { list, total } = this;
			if(list.length < total) {
				uni.showLoading();
				++this.page;
				this.initOrder()
			}
		}
	}
</script>

<style scoped>
.top-header {
	background: white;
}
.tab-box {
	width: 100%;
	padding: 0 60rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.item-tab {
	padding: 20rpx 0;
	font-size: 28rpx;
	position: relative;
	color: #5C5B5B;
	font-weight: bold;
}
.border-btm {
	width: 100%;
	height: 5rpx;
	background: linear-gradient(90deg, #FF7040, #FF3E29);
	border-radius: 3rpx;
	position: absolute;
	bottom: 0;
	left: 0;
}

.sai-search-box {
	width: 100%;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.left-sai-box {
	width: 188rpx;
	height: 56rpx;
	border: solid 1rpx #EFEFEF;
	box-sizing: border-box;
	padding: 20rpx 12rpx;
	display: flex;
	align-items: center;
	margin-right: 20rpx;
}
.search-box {
	width: 100%;
	height: 56rpx;
	padding: 0 30rpx 0 60rpx;
	box-sizing: border-box;
	background-color: #F8F8F8;
	border-radius: 6rpx;
}
.search-box input {
	width: 100%;
	height: 100%;
	font-size: 26rpx;
}
.content-box {
	width: 100%;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}
.item-order {
	width: 100%;
	background-color: white;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
}
.top-head {
	padding: 25rpx 28rpx;
	border-bottom: solid 2rpx #F6F6F6;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.left-top-time {
	font-size: 26rpx;
	line-height: 26rpx;
	font-weight: 500;
}
.order-status {
	font-size: 26rpx;
	line-height: 26rpx;
	color: #FF3400;
	font-weight: 500;
}
.btm-order {
	padding: 28rpx 28rpx 10rpx;
	border-bottom: solid 2rpx #F6F6F6;
}
.top-btm-box {
	width: 100%;
	display: flex;
}
.left-shop-img {
	width: 88rpx;
	height: 133rpx;
	flex-shrink: 0;
	margin-right: 37rpx;
}
.left-shop-img image {
	width: 100%;
	height: 100%;
}
.right-shop-detail {
	width: 100%;
	display: flex;
	flex-direction: column;
}
.shop-name {
	font-size: 28rpx;
	padding: 6rpx 0;
	margin-bottom: 15rpx;
	font-weight: 500;
}
.label-box {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: space-between;
}
.item-label {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	line-height: 24rpx;
	color: #999999;
}
.mb-2 {
	margin-bottom: 20rpx;
}
.mr-1 {
	margin-right: 5rpx;
}
.font-color-red{
	color: #FF3400;
}
.icon-box-m6 {
	width: 26rpx;
	height: 27rpx;
	margin-left: 5rpx;
}
.footer-box {
	padding: 23rpx 27rpx;
	display: flex;
	justify-content: space-between;
}
.label-item-footer {
	min-width: 134rpx;
	padding: 12rpx 20rpx;
	border: solid 2rpx #F4201C;
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	font-size: 24rpx;
	color: #F4201C;
}
.icon-m7-image {
	width: 22rpx;
	height: 22rpx;
	margin-right: 10rpx;
}
.icon-m7-image image {
	width: 100%;
	height: 100%;
}
.right-footer-box {
	display: flex;
	align-items: center;
}
.label-item-footer-static {
	border: solid 2rpx #eaeaea !important;
	color: #626262 !important;
}
</style>
